<template>
    <el-select
        class="width_100"
        placeholder="请选择"
        filterable
        collapse-tags
        :multiple="multiple"
        v-model="selectValue"
        collapse-tags-tooltip
        :clearable="clearable"
        :filter-method="handleQuerySearch"
        @change="handleQueryChange"
        @visible-change="visibleChange"
    >
      <el-option
        v-for="item in selectOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      <VabElSelectLoading
        :page="page"
        :loading="loading"
        :hasMore="hasMore"
        @loadMore="handleLoadMore"
      />
    </el-select>
  </template>
  
<script setup lang="ts">
/**
 * @import
 */
import _ from 'lodash';
import { ref } from 'vue'
import { productCustomerProductSearch } from '~/src/api/dms/product';

/**
 * @props
 */
const props = defineProps({
    value: {
        type: String,
        default: '',
    },
    type: {
        type: String,
        default: '',
    },
    apiType: {
        type: Number,
        default: 1,
    },
    multiple: {
        type: Boolean,
        default: false,
    },
    clearable: {
        type: Boolean,
        default: true,
    },
})

/**
 * @var
 */

const proxy: any = getCurrentInstance()?.proxy
const page = ref(0)
const loading = ref(false)
const isVisibleChange = ref(false)
const hasMore = ref(true)

const selectValue = ref<any>()
const sreachValue = ref<any>('')
const selectOptions = ref<any[]>([])

const emit = defineEmits(['LazyChange'])

/**
 * 加载数据列表
 */
const loadDataList = async () => {
    try {
        loading.value = true

        // 参数
        let data = {
            page: page.value,
            type: props.apiType,
            limit: 10,
            filter: {
                customer_number: props.type == 'customer_number' ? sreachValue.value : '', // 物料编码
                customer_name: props.type == 'customer_name' ? sreachValue.value : '', // 物料编码
                product_number: props.type == 'product_number' ? sreachValue.value : '', // 物料编码
                product_name: props.type == 'product_name' ? sreachValue.value : '', // 物料编码
            },
        }

        // api
        const res = await productCustomerProductSearch({ ...data })

        // 遍历获取
        const list = res.data.list.map((item: any) => {
            if (props.type == 'customer_number') return { value: item.customer_number, label: item.customer_number }
            if (props.type == 'customer_name') return { value: item.customer_name, label: item.customer_name }
            if (props.type == 'product_number') return { value: item.product_number, label: item.product_number }
            if (props.type == 'product_name') return { value: item.product_name, label: item.product_name }
        }) || []

        if (page.value == 1) selectOptions.value = []

        // 添加新的数据
        selectOptions.value.push(...list)

        // 是否进行加载数据
        hasMore.value = selectOptions.value.length < res.data.count

        loading.value = false

    } catch (err) {
        console.error(err)
    } finally {
        loading.value = false
    }
}

/**
 * 加载更多数据
 */

const handleLoadMore = _.throttle(async (value: any) => {
    if (!isVisibleChange.value) return
    page.value = await value
    loadDataList()
}, 1000)

/**
 * 模糊搜索
 */
const handleQuerySearch = _.throttle((value: any) => {
    // 去空格 大小写
    sreachValue.value = value?.trim().toLowerCase().replace(/\s+/g, '\n')
    page.value = 1
    // 加载数据
    loadDataList()
}, 1000)


const visibleChange = (lay: boolean) => {
    isVisibleChange.value = lay
    if (!lay) return
}

/**
 * change
 */
const handleQueryChange = (value: any) => {
    emit('LazyChange', value)
}

/**
 * @实例
 */

watch(
    () => props.value,
    (newValue, oldValue) => {
        selectValue.value = newValue
    },
    { deep: true, immediate: true }
)

defineExpose({
})
</script>
  
<style lang="scss" scoped></style>
  